{extend name="common/layout" /}
{block name="main"}
<t-card class="list-card-container" :bordered="false">
  <t-button theme="primary" style="margin-bottom: 10px;" @click="handleAdd" :disabled="buttonDisabled">
    <template #icon><t-icon name="add" /></template>
    新建
  </t-button>
  <t-table :data="tableData" :columns="columns" row-key="id" vertical-align="top" :bordered="true" size="small"
    active-row-type="single" :hover="true" :loading="tableLoading">
    <template #state="{ row }">
      <t-tag v-if="row.type === 'E'" theme="warning" variant="light"> 电表 </t-tag>
      <t-tag v-if="row.type === 'W'" theme="primary" variant="light"> 水表 </t-tag>
    </template>
    <template #op="slotProps">
      <t-space>
        <t-button size="small" @click="handleEdit(slotProps.row)">修改</t-button>
        <t-popconfirm theme="danger" content="确认删除?" @confirm="handleDelete(slotProps.row)" :disabled="disable">
          <t-button theme="danger" size="small">删除</t-button>
        </t-popconfirm>
      </t-space>
    </template>
  </t-table>
</t-card>

<!-- 新增FORM -->
<t-dialog v-model:visible="dialogVisible" :header="formHeader" :width="680" :footer="false">
  <t-form ref="meterForm" :data="formData" :rules="rules" :label-width="100" @submit="handleSave">
    <t-form-item label="总表名称" name="name">
      <t-input v-model="formData.name" :style="{ width: '480px' }" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="类型" name="type">
      <t-radio-group v-model="formData.type" @change="onChange">
        <t-radio value="E">电表</t-radio>
        <t-radio value="W">水表</t-radio>
      </t-radio-group>
    </t-form-item>
    <t-form-item label="关联房间" name="number_name">
      <t-checkbox-group v-model="numberCheckbox" :options="numberArr"></t-checkbox-group>
    </t-form-item>
    <t-form-item style="float: right">
      <t-button variant="outline" @click="dialogVisible = false" style="margin-right: 5px;">取消</t-button>
      <t-button theme="primary" type="submit" :disabled="disable">确定</t-button>
    </t-form-item>
  </t-form>
</t-dialog>
{/block}

{block name="script"}
<script>
  const data = {
    tableData: [],
    tableLoading: false,
    columns: [
      { title: '总表名称', colKey: 'name', width: 100, align: 'left', fixed: 'left', },
      { title: '类型', colKey: 'state', width: 100 },
      // { title: '关联房产', colKey: 'property_name', width: 100 },
      { title: '关联房间', colKey: 'number_name', width: 300 },
      { title: '操作', colKey: 'op', width: 160, align: 'left', fixed: 'right', },
    ],
    dialogVisible: false,
    formData: {},
    formHeader: '',
    rules: {
      name: [{ required: true, message: '房产名不能为空', trigger: 'blur' }],
      type: [{ required: true, message: '类别必选', }],
    },
    numberArr: [],
    numberCheckbox: [],
    // 避免重复点击
    disable: false,
  };

  function f() {
    return {
      init: function () {
        this.tableLoading = true;
        axiosGet("{:url('queryMeter')}").then(response => {
          if (response.code == 1) {
            this.tableData = response.data;
          } else {
            this.$message.error('系统出错了!!!');
          }
          this.tableLoading = false;
        });
        axiosGet("{:url('/admin/house.Number/queryNumberId')}").then(response => {
          if (response.code == 1) {
            this.numberArr = response.data;
            this.numberArr.unshift({ label: '全选', checkAll: true });
          } else {
            this.$message.error('系统出错了!!!');
          }
        });
      },
      handleAdd() {
        this.$refs.meterForm.reset();
        this.formData = { 'name': this.houseName + '-水电表', 'house_property_id': this.houseDef };
        this.formHeader = this.houseName + ' - 新增水电表';
        this.dialogVisible = true;
        this.numberCheckbox = [];
      },
      handleSave() {
        this.disable = true;
        this.$refs.meterForm.validate().then((valid) => {
          if (valid == true) {
            this.formData.house_number_id = this.numberCheckbox.join();
            axiosPost("{:url('save')}", this.formData).then(response => {
              if (response.state == 'success') {
                this.$message.success(response.msg);
                this.dialogVisible = false;
                this.init();
              } else if (response.state == 'warning') {
                this.$message.warning(response.msg);
              } else {
                this.$message.error(response.msg);
              }
            }).finally(() => {
              this.disable = false;
            });
          } else {
            this.disable = false;
          }
        });
      },
      handleEdit(row) {
        this.$refs.meterForm.reset();
        this.formData = { ...row };
        this.formHeader = this.houseName + ' - 修改水电表';
        this.numberCheckbox = this.formData.house_number_id.split(',').map(Number);
        this.dialogVisible = true;
      },
      handleDelete(row) {
        if (this.disable) return;
        this.disable = true;
        axiosPost("{:url('delete')}", row).then(response => {
          if (response.state == 'success') {
            this.$message.success(response.msg);
            this.init();
          } else if (response.state == 'warning') {
            this.$message.warning(response.msg);
          } else {
            this.$message.error(response.msg);
          }
        }).finally(() => {
          this.disable = false;
        });
      },
      onChange(checkedValues) {
        if (checkedValues === 'E') {
          this.formData.name = this.houseName + '-电表';
        } else {
          this.formData.name = this.houseName + '-水表';
        }
      },
    }
  }
</script>
{/block}